import { StyleSheet, ScrollView, Alert, Pressable } from 'react-native';
import { useLocalSearchParams, router } from 'expo-router';
import { useNavigation } from "@react-navigation/native";
import FontAwesome from '@expo/vector-icons/FontAwesome';
import {SelectImg,TakePhoto} from '@/app/utils/selectImg'
// 确保事件系统被导入
import '@/app/toast/event';

import { Text, View } from '@/components/Themed';
import Colors from '@/constants/Colors';
import { useColorScheme } from '@/components/useColorScheme';
import Headers from '@/app/components/header/Headers'

export default function SettingsScreen() {
  const colorScheme = useColorScheme();
  const params = useLocalSearchParams();
  let navigation = useNavigation<any>();

  // 获取传递的参数
  const from = params.from as string;
  const userId = params.userId as string;

  const showParamsAlert = () => {
    Alert.alert(
      '传递的参数',
      `来源页面: ${from}\n用户ID: ${userId}`,
      [{ text: '确定' }]
    );
  };

  // 移除 handleNavigation 函数，直接在按钮中使用 router.push

  return (
    <View style={{ flex: 1, position: 'relative' }}>
      <Headers title="设置" leftIcon={require('@/assets/images/icon/back.png')} barStyle={0} />
      <ScrollView style={styles.container}>
        <View style={styles.content}>
          <Text style={styles.sectionTitle}>页面信息</Text>
          <View style={styles.infoCard}>
            <Text style={styles.infoText}>来源页面: {from}</Text>
            <Text style={styles.infoText}>用户ID: {userId}</Text>
          </View>

          <Text style={styles.sectionTitle}>设置选项</Text>
          <View style={styles.settingsList}>
            <Pressable
              style={styles.settingItem}
              onPress={() => router.push('/pages/profile/profile' as any)}
            >
              <FontAwesome name="user" size={20} color={Colors[colorScheme ?? 'light'].text} />
              <Text style={styles.settingText}>个人资料</Text>
              <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
            </Pressable>

            <Pressable
              style={styles.settingItem}
              onPress={() => router.push('/pages/notification/notification' as any)}
            >
              <FontAwesome name="bell" size={20} color={Colors[colorScheme ?? 'light'].text} />
              <Text style={styles.settingText}>通知设置</Text>
              <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
            </Pressable>

            <Pressable
              style={styles.settingItem}
              onPress={() => router.push('/pages/privacy/privacy' as any)}
            >
              <FontAwesome name="shield" size={20} color={Colors[colorScheme ?? 'light'].text} />
              <Text style={styles.settingText}>隐私与安全</Text>
              <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
            </Pressable>

            <Pressable
              style={styles.settingItem}
              onPress={() => router.push('/pages/help/help' as any)}
            >
              <FontAwesome name="question-circle" size={20} color={Colors[colorScheme ?? 'light'].text} />
              <Text style={styles.settingText}>帮助与支持</Text>
              <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
            </Pressable>
            <Pressable
              style={styles.settingItem}
              onPress={() => {
                navigation.navigate('pages/qrScanner/qRScanner',{
                  callback: (value: string) => {
                    console.log("回传数据", value);
                  }
                });
              }}
            >
              <FontAwesome name="question-circle" size={20} color={Colors[colorScheme ?? 'light'].text} />
              <Text style={styles.settingText}>相机</Text>
              <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
            </Pressable>
            <Pressable
              style={styles.settingItem}
              onPress={() => router.push('/pages/langeuageSettingPage/langSetting' as any)}
            >
              <FontAwesome name="question-circle" size={20} color={Colors[colorScheme ?? 'light'].text} />
              <Text style={styles.settingText}>语言设置</Text>
              <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
            </Pressable>
            <Pressable
              style={styles.settingItem}
              onPress={() => {
                SelectImg().then(res=>{
                  console.log(res)
                }).catch(err=>{
                  console.log(err);
                })
              }}
            >
              <FontAwesome name="question-circle" size={20} color={Colors[colorScheme ?? 'light'].text} />
              <Text style={styles.settingText}>选择照片1</Text>
              <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
            </Pressable>
             <Pressable
              style={styles.settingItem}
              onPress={() => {
                TakePhoto().then(res=>{
                  console.log(res)
                }).catch(err=>{
                  console.log(err);
                })
              }}
            >
              <FontAwesome name="question-circle" size={20} color={Colors[colorScheme ?? 'light'].text} />
              <Text style={styles.settingText}>拍照</Text>
              <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
            </Pressable>
             <Pressable
              style={styles.settingItem}
              onPress={() => {
                global.$openPicker(
                  {
                    options:[
                        { label: '中国', value: 'china' },
                        { label: '美国', value: 'usa' },
                        { label: '日本', value: 'japan' },
                        { label: '韩国', value: 'korea' },
                        { label: '中国', value: 'china1' },
                        { label: '美国', value: 'usa1' },
                        { label: '日本', value: 'japan1' },
                        { label: '韩国', value: 'korea1' },
                        { label: '中国', value: 'china2' },
                        { label: '美国', value: 'usa2' },
                        { label: '日本', value: 'japan2' },
                        { label: '韩国', value: 'korea2' },
                    ],
                    selectedValue:'usa',
                    callback:(data:any)=>{
                      console.log('--------:',data)
                    }
                  }
                )
              }}
            >
              <FontAwesome name="question-circle" size={20} color={Colors[colorScheme ?? 'light'].text} />
              <Text style={styles.settingText}>打开picker</Text>
              <FontAwesome name="chevron-right" size={16} color={Colors[colorScheme ?? 'light'].text} />
            </Pressable>
          </View>

          <View style={styles.buttonContainer}>
            <FontAwesome.Button
              name="info-circle"
              backgroundColor="#007AFF"
              onPress={showParamsAlert}
              style={styles.infoButton}
            >
              <Text style={styles.buttonText}>查看传递的参数</Text>
            </FontAwesome.Button>
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: 'white',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  backButton: {
    marginRight: 16,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  content: {
    padding: 16,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 12,
    marginTop: 20,
  },
  infoCard: {
    backgroundColor: 'white',
    padding: 16,
    borderRadius: 8,
    marginBottom: 20,
  },
  infoText: {
    fontSize: 14,
    marginBottom: 8,
  },
  settingsList: {
    backgroundColor: 'white',
    borderRadius: 8,
    marginBottom: 20,
  },
  settingItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  settingText: {
    flex: 1,
    fontSize: 16,
    marginLeft: 12,
  },
  buttonContainer: {
    alignItems: 'center',
    marginTop: 20,
  },
  infoButton: {
    paddingHorizontal: 20,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
});
